<template>
  <div class="bepaid">
    <!-- 订单信息 -->
    <div class="order-box" v-if="lang == 'zh'">
      <h6>{{ order_state_txt }}</h6>
      <p>订单编号：{{ data.exchange_code }}</p>
      <p>订单时间：{{ data.submit_time }}</p>
    </div>
    <div class="order-box" v-if="lang == 'en'">
      <h6>{{ order_state_txt }}</h6>
      <p>Order number:{{ data.exchange_code }}</p>
      <p>Order time:{{ data.submit_time }}</p>
    </div>
    <!-- 确认信息 -->
    <div class="info-box">
      <img
        v-if="lang == 'zh'"
        src="http://img.zuimeng.net.cn/goods/images/zhihuanxinxi@2x.png"
        alt=""
      />
      <img
        v-if="lang == 'en'"
        src="http://img.zuimeng.net.cn/image/jpg/engzhihuanxinxi_eng@2x.png"
        alt=""
      />
      <div class="goods-box" @click="goDetails(inGoods.goods_id, 0)">
        <div class="img-box">
          <img :src="inGoods.head_img" alt="" />
          <img
            class="label"
            v-if="lang == 'zh'"
            src="http://img.zuimeng.net.cn/goods/image/huanjin@2x.png"
            alt=""
          />
          <img
            class="label"
            v-if="lang == 'en'"
            src="http://img.zuimeng.net.cn/image/jpg/enghuanjin_eng@2x.png"
            alt=""
          />
        </div>
        <dl>
          <dt
            style="
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              text-overflow: ellipsis;
            "
          >
            {{ inGoods.title }}
          </dt>
          <dd>
            ￥{{ inGoods.goods_price }} <span>x{{ inGoods.goods_num }}</span>
          </dd>
        </dl>
      </div>
      <div class="handle-box">
        <!-- 选择商品之后 -->
        <div class="selected">
          <img
            src="http://img.zuimeng.net.cn/goods/image/zhihuan@2x.png"
            alt=""
          />
        </div>
      </div>
      <!-- 自己换出的商品 -->
      <div class="sales-box">
        <div
          class="goods-box sold-box"
          v-for="(item, index) in outGoods"
          :key="index"
          @click="goDetails(outGoods[index].goods_id, 1)"
        >
          <div class="img-box">
            <img :src="item.head_img" alt="" />
            <img
              class="label"
              v-if="lang == 'zh'"
              src="http://img.zuimeng.net.cn/goods/image/huanchu@2x.png"
              alt=""
            />
            <img
              class="label"
              v-if="lang == 'en'"
              src="http://img.zuimeng.net.cn/image/jpg/enghuanchu_eng@2x.png"
              alt=""
            />
          </div>
          <dl>
            <dt
              style="
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                text-overflow: ellipsis;
              "
            >
              {{ item.title }}
            </dt>
            <dd>
              ￥{{ item.goods_price }} <span>x{{ item.goods_num }}</span>
            </dd>
          </dl>
        </div>
      </div>
    </div>

    <!-- 物流信息 -->
    <div
      class="payMoney exp"
      v-if="
        (data.seller_state > 3 && data.seller_state < 7) ||
        ((data.seller_state == 7 || data.seller_state == 8) &&
          (data.buyer_state == 5 ||
            data.buyer_state == 6 ||
            data.buyer_state == 4))
      "
    >
      <p>
        <img
          v-if="lang == 'zh'"
          src="http://img.zuimeng.net.cn/order/images/wuliuxinxi@2x.png"
          alt=""
        />
        <img
          v-if="lang == 'en'"
          src="http://img.zuimeng.net.cn/image/jpg/engwuliuxinxi_eng@2x.png"
          alt=""
        />
      </p>
      <!-- bottom -->
      <ul class="bottom" v-if="lang == 'zh'">
        <li v-if="data.platform_tobuyer_com == ''">
          快递公司 <span>{{ data.seller_express_com }}</span>
        </li>
        <li v-else>
          快递公司 <span>{{ data.platform_tobuyer_com }}</span>
        </li>
        <li v-if="data.platform_tobuyer_code == ''">
          快递单号 <span>{{ data.seller_express_code }}</span>
        </li>
        <li v-else>
          快递单号 <span>{{ data.platform_tobuyer_code }}</span>
        </li>
      </ul>
      <ul class="bottom" v-else>
        <li v-if="data.platform_tobuyer_com == ''">
          Courier company <span>{{ data.seller_express_com }}</span>
        </li>
        <li>
          Courier company <span>{{ data.platform_tobuyer_com }}</span>
        </li>
        <li v-if="data.platform_tobuyer_code == ''">
          tracking number <span>{{ data.seller_express_code }}</span>
        </li>
        <li>
          tracking number <span>{{ data.platform_tobuyer_code }}</span>
        </li>
      </ul>
    </div>

    <!-- 申请原因 -->
    <div
      class="payMoney"
      v-if="
        data.seller_state == 1 ||
        data.seller_state == 10 ||
        data.seller_state == 11 ||
        data.buyer_state == 8 ||
        data.buyer_state == 7
      "
    >
      <p>
        <img
          v-if="lang == 'zh'"
          src="http://img.zuimeng.net.cn/order/images/shenqingyuanyin@2x.png"
          alt=""
        />
        <img
          v-if="lang == 'en'"
          src="http://img.zuimeng.net.cn/image/jpg/engshenqingyuanyin_eng@2x.png"
          alt=""
        />
      </p>
      <!-- bottom -->
      <ul class="bottom" v-if="lang == 'zh'">
        <li v-if="data.buyer_state == 8 || data.buyer_state == 7">
          申请关闭原因： <span>{{ data.buyer_close_reason }}</span>
        </li>
        <li v-else>
          申请关闭原因： <span>{{ data.seller_close_reason }}</span>
        </li>
      </ul>
      <ul class="bottom" v-else>
        <li v-if="data.buyer_state == 8 || data.buyer_state == 7">
          Reason for closing： <span>{{ data.buyer_close_reason }}</span>
        </li>
        <li v-else>
          Reason for closing： <span>{{ data.seller_close_reason }}</span>
        </li>
      </ul>
    </div>
    <!-- 保证金 -->
    <div
      class="payMoney"
      v-if="
        ((data.seller_state == 6 ||
          data.seller_state == 7 ||
          data.seller_state == 8) &&
          (data.buyer_state == 5 ||
            data.buyer_state == 6 ||
            data.buyer_state == 4)) ||
        data.seller_state == 1 ||
        data.seller_state == 10 ||
        data.seller_state == 11 ||
        data.buyer_state == 8 ||
        data.buyer_state == 7
      "
    >
      <p>
        <img
          class="bzj"
          v-if="lang == 'zh'"
          src="http://img.zuimeng.net.cn/order/images/baozhengjin@2x.png"
          alt=""
        />
        <img
          class="bzj"
          v-if="lang == 'en'"
          src="http://img.zuimeng.net.cn/image/jpg/engbaozhengjin_eng@2x.png"
          alt=""
        />
      </p>
      <!-- bottom -->
      <ul class="bottom">
        <li>
          <i v-if="lang == 'zh'">保证金状态</i> <i v-else>Bond status</i>
          <!-- color == 0 red  1 green -->
          <p class="green" v-if="data.color == 1">{{ seller_state_txt }}</p>
          <p class="red" v-if="data.color == 0">{{ seller_state_txt }}</p>
        </li>
      </ul>
    </div>

    <!-- 底部提示 -->
    <div
      class="tip"
      v-if="
        ((data.seller_state == 6 ||
          data.seller_state == 7 ||
          data.seller_state == 8) &&
          (data.buyer_state == 5 ||
            data.buyer_state == 6 ||
            data.buyer_state == 4)) ||
        data.seller_state == 1 ||
        data.seller_state == 10 ||
        data.seller_state == 11 ||
        data.buyer_state == 8 ||
        data.buyer_state == 7
      "
    >
      <i></i
      ><span v-if="lang == 'zh'"
        >保证金会在1~3个工作日原路返回，请注意查收</span
      >
      <span v-else
        >The deposit will be returned on the original road within 1~3 working
        days. Please pay attention to check</span
      >
    </div>

    <!-- 优惠买单按钮 -->
    <!--btn_view 0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮 -->
    <div v-show="data.btn_view != 0">
      <div class="btn-box" v-if="lang == 'zh'">
        <div
          class="btn"
          @click="submit"
          v-if="data.btn_delivery == 1 && data.btn_view == 2"
        >
          我要发货
        </div>

        <div
          class="refuse"
          @click="refuse"
          v-if="data.btn_applyClose == 1 && data.btn_view == 2"
        >
          申请关闭交易
        </div>
        <div
          class="centerrefuse"
          @click="refuse"
          v-if="data.btn_applyClose == 1 && data.btn_view == 3"
        >
          申请关闭交易
        </div>

        <div
          class="centerrefuse"
          @click="acceptOK"
          v-if="data.btn_confirm == 1 && data.btn_view == 3"
        >
          确认收货
        </div>
        <div
          class="centerrefuse del"
          @click="delOrder"
          v-if="data.btn_view == 1"
        >
          删除订单
        </div>
      </div>
      <div class="btn-box" v-if="lang == 'en'">
        <div
          class="btn"
          @click="submit"
          v-if="data.btn_delivery == 1 && data.btn_view == 2"
        >
          Deliver
        </div>

        <div
          class="refuse"
          @click="refuse"
          v-if="data.btn_applyClose == 1 && data.btn_view == 2"
        >
          Apply to Close
        </div>
        <div
          class="centerrefuse"
          @click="refuse"
          v-if="data.btn_applyClose == 1 && data.btn_view == 3"
        >
          Apply to Close
        </div>

        <div
          class="centerrefuse"
          @click="acceptOK"
          v-if="data.btn_confirm == 1 && data.btn_view == 3"
        >
          Confirm
        </div>
        <div
          class="centerrefuse del"
          @click="delOrder"
          v-if="data.btn_view == 1"
        >
          Delete order
        </div>
      </div>
    </div>

    <!-- loading -->
    <div class="loading-box" v-show="loading">
      <van-loading type="spinner" color="white" />
    </div>
  </div>
</template>
<script>
import {
  getmyExchangeDetail,
  postmyExchangeDeleteOrder,
  postmyExchangeFinish,
} from "@/api/my/myexchange";
import { Loading, Toast, Cell, CellGroup, RadioGroup, Radio } from "vant";

export default {
  name: "mychangeDetail",
  //声明组件
  components: {
    [Loading.name]: Loading,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
  },
  data() {
    return {
      lang: "zh", //当前网页语言类型 zh 中文  en 英语
      id: 0, //当前订单id
      type: 1, //选择商品类型 1购买 0置换
      userId: 0, //用户id
      data: {}, //详情数据
      outGoods: {}, //换出的商品
      inGoods: [], //换进的商品 可能是多个
      radio: "3", //支付方式:1余额，2支付宝，3微信
      balance: 0, //我的余额
      myBalance: "", //我的余额描述
      totalPrice: "", //购买的总价格
      loading: false, //加载提示框 是否显示(页面初始加载显示)
      isSelected: false, //是否选择了置换的商品
      seller_state_txt: "", //保证金状态
      order_state_txt: "", //订单状态
      seller_close_reason: "无",
    };
  },
  //实例创建完成后被立即调用
  created() {
    //获得语言类型lang
    if (this.$route.query.lang) {
      this.lang = this.$route.query.lang;
    }
    //获取用户id
    if (this.$route.query.userId && this.$route.query.userId > 0) {
      this.userId = this.$route.query.userId;
      // this.getUserInfo();
      //把用户id存储在缓存
      window.localStorage.setItem("userId", this.userId);
    } else {
      this.userId = window.localStorage.getItem("userId");
    }
    //获取订单id
    if (this.$route.query.id && this.$route.query.id > 0) {
      this.id = this.$route.query.id;
      //请求数据
      this.getAllData();
    } else {
      if (this.lang == "zh") Toast("获得订单ID失败，请返回列表页重试");
      else Toast("The order ID failed. Please return and try again.");
      this.loading = false;
    }
  },
  //
  methods: {
    //获得所有详情数据
    getAllData() {
      getmyExchangeDetail(this.id, this.lang).then((res) => {
        if (res.code == 200) {
          this.data = res.data;
          this.outGoods = this.data.outputGoods;
          this.inGoods = this.data.incomeGoods;
          this.totalPrice = this.data.seller_bond;
          if (
            (this.data.seller_state == 1 || this.data.seller_state == 10) &&
            this.data.seller_close_reason.length == 0
          ) {
            //被置换方提出关闭并且关闭理由为空
            this.data.seller_close_reason = this.seller_close_reason;
          } else if (
            (this.data.buyer_state == 8 || this.data.buyer_state == 7) &&
            this.data.buyer_close_reason.length == 0
          ) {
            //置换方提出关闭并且关闭理由为空
            this.data.buyer_close_reason = this.seller_close_reason;
          }

          //根据单方面卖家状态
          if (this.data.seller_state == 0 && this.data.buyer_state < 2) {
            //卖家未处理交易   等待平台通知对方
            // 此时按钮需要判断买家是否已支付保证金：
            //1.未支付保证金：按钮开放“申请关闭交易”与“支付保证金”
            //2.已支付保证金：按钮开放“申请关闭交易”与“查看订单”
            if (this.lang == "zh") {
              this.order_state_txt = "等待平台联系对方";
            } else {
              this.order_state_txt = "Waiting for contact ";
            }
            if (this.data.buyer_state == 0) {
              //买家未支付保证金   按钮： 申请关闭交易、支付保证金
              this.data.btn_applyClose = 1;
              this.data.btn_payBail = 1;
              this.data.btn_view = 2; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else if (this.data.buyer_state == 1) {
              //买家已支付保证金  按钮：申请关闭交易、查看交易
              this.data.btn_applyClose = 1;
              //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
              this.data.btn_view = 3;
            }
          } else if (this.data.seller_state == 0 && this.data.buyer_state > 6) {
            //卖家未处理  买家申请关闭   按钮： 查看交易
            //买家可能有三种状态：7.保证金已退回，买家方已结束所有流程；8.申请撤销，买家方提出反悔且已支付保证金前提下；9.已关闭，买家未支付保证金申请关闭
            if (this.lang == "zh") {
              this.order_state_txt = "交易关闭";
            } else {
              this.order_state_txt = "closed";
            }
            this.data.btn_view = 0;
            // 置换：
            // 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收买家货、4平台已发货（给买家）、5已收对方藏品、 6保证金已退回、7保证金没收、8申请撤销、9已关闭
            // 卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收卖家货、 6平台已发货（给卖家）、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
          } else if (
            this.data.seller_state == 1 &&
            (this.data.buyer_state == 0 ||
              this.data.buyer_state == 6 ||
              this.data.buyer_state == 9)
          ) {
            //卖家不同意置换   订单关闭   按钮： 查看交易    买家未支付保证金   订单直接关闭
            if (this.lang == "zh") {
              this.order_state_txt = "交易关闭";
            } else {
              this.order_state_txt = "closed";
            }
            this.data.btn_view = 1; //0 底部为空   1底部是删除按钮  2底部为其他按钮
          } else if (
            this.data.seller_state == 1 &&
            this.data.buyer_state == 1
          ) {
            //卖家不同意置换   订单关闭   按钮： 查看交易    买家支付保证金   订单直接关闭
            if (this.lang == "zh") {
              this.order_state_txt = "交易关闭";
            } else {
              this.order_state_txt = "closed";
            }
            this.data.btn_view = 0; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
          } else if (this.data.seller_state == 2 && this.data.buyer_state < 7) {
            //卖家同意置换未支付保证金    买家愿意继续交易
            if (this.lang == "zh") {
              this.order_state_txt = "对方已同意置换";
            } else {
              this.order_state_txt = "agreed";
            }
            if (this.data.buyer_state == 0) {
              //买家未支付保证金   按钮：  申请关闭交易   支付保证金
              this.data.btn_applyClose = 1;
              this.data.btn_payBail = 1;
              this.data.btn_view = 2; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else if (this.data.buyer_state == 1) {
              //买家已支付保证金  按钮： 申请关闭交易   查看交易
              this.data.btn_applyClose = 1;
              this.data.btn_view = 3; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            }
          } else if (
            this.data.seller_state == 2 &&
            (this.data.buyer_state == 7 || this.data.buyer_state == 9)
          ) {
            //卖家同意置换未支付保证金     买家保证金已没收或者订单状态为已关闭      按钮：   查看交易
            if (this.lang == "zh") {
              this.order_state_txt = "交易关闭";
            } else {
              this.order_state_txt = "closed";
            }
            this.data.btn_view = 1; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
          } else if (
            this.data.seller_state == 2 &&
            this.data.buyer_state == 8
          ) {
            //卖家同意置换未支付保证金     买家申请交易关闭    按钮：   查看交易
            if (this.lang == "zh") {
              this.order_state_txt = "申请关闭中";
            } else {
              this.order_state_txt = "Apply to close";
            }
            this.data.btn_view = 0;
          } else if (
            this.data.seller_state == 3 &&
            (this.data.buyer_state == 1 ||
              this.data.buyer_state == 2 ||
              this.data.buyer_state == 3)
          ) {
            //卖家同意置换已支付保证金  但未发货  并且 买家--即本视角已支付保证金或者已发货    此时 卖家开放“我要发货”按钮---即---买家获取“等待对方发货”信息    同时  买家也开放“我要发货”按钮
            if (this.lang == "zh") {
              this.order_state_txt = "等待对方发货";
            } else {
              this.order_state_txt = "Waiting for delivery";
            }
            if (this.data.buyer_state == 1) {
              //买家已支付保证金未发货  按钮：申请关闭交易   我要发货
              this.data.btn_applyClose = 1;
              this.data.btn_delivery = 1;
              this.data.btn_view = 2; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else if (
              this.data.buyer_state == 2 ||
              this.data.buyer_state == 3
            ) {
              //买家已发货   并且卖家未发货   此时买家不允许申请关闭交易  按钮：  查看交易
              this.data.btn_view = 0; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            }
          } else if (
            this.data.seller_state == 3 &&
            this.data.buyer_state == 0
          ) {
            //卖家同意置换已支付保证金  并且 买家--即本视角未支付保证金    此时 买家开放“申请关闭交易  支付保证金”按钮
            if (this.lang == "zh") {
              this.order_state_txt = "对方已支付保证金";
            } else {
              this.order_state_txt = "Seller has paid the deposit";
            }
            this.data.btn_applyClose = 1;
            this.data.btn_payBail = 1;
            this.data.btn_view = 2; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
          } else if (this.data.seller_state == 4 && this.data.buyer_state < 2) {
            //卖家已发货   此时买家方按钮需要判读买家是否已发货：1.买家未发货：买家获取”对方已发货“信息，开放“申请关闭交易 我要发货”按钮   2.买家已发货：买家获取“双方已发货”信息，开放“查看订单”交易
            //1.卖家已发货   买家未发货   “对方已发货”    注：我的置换：哪方发货，这一方就不可申请关闭交易，如果对方没有发货，对方可申请关闭交易
            if (this.lang == "zh") {
              this.order_state_txt = "对方已发货";
            } else {
              this.order_state_txt = "shipped ";
            }
            if (this.data.buyer_state == 0) {
              //买家未支付保证金  按钮：  申请关闭   支付保证金
              this.data.btn_applyClose = 1;
              this.data.btn_payBail = 1;
              this.data.btn_view = 2; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else if (this.data.buyer_state == 1) {
              //买家已支付保证金  按钮：  申请关闭交易  我要发货
              this.data.btn_applyClose = 1;
              this.data.btn_delivery = 1;
              this.data.btn_view = 2; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            }
          } else if (
            this.data.seller_state == 4 &&
            (this.data.buyer_state == 2 || this.data.buyer_state == 3)
          ) {
            //卖家已发货   此时买家方按钮需要判读买家是否已发货：1.买家未发货：买家获取”对方已发货“信息，开放”申请关闭交易”和“我要发货”按钮   2.买家已发货：买家获取“双方已发货”信息，开放“查看订单”交易
            //2.卖家已发货   买家已发货||买家所发的藏品已被平台验收   “双方已发货”    注：我的置换：哪方发货，这一方就不可申请关闭交易，如果对方没有发货，对方可申请关闭交易
            if (this.lang == "zh") {
              this.order_state_txt = "双方已发货";
            } else {
              this.order_state_txt = "shipped both";
            }
            this.data.btn_view = 0;
          } else if (
            this.data.seller_state == 5 &&
            (this.data.buyer_state == 2 || this.data.buyer_state == 3)
          ) {
            //卖家所发的藏品   平台已验收 买家也已发货  按钮  买家开放“查看交易”按钮
            if (this.lang == "zh") {
              this.order_state_txt = "平台已验收";
            } else {
              this.order_state_txt = "Platform accepted";
            }
            this.data.btn_view = 0;
          } else if (
            this.data.seller_state == 5 &&
            this.data.buyer_state == 1
          ) {
            //卖家所发的藏品   平台已验收 买家还未发货  按钮  买家开放“申请关闭交易    我要发货”按钮
            if (this.lang == "zh") {
              this.order_state_txt = "平台已验收";
            } else {
              this.order_state_txt = "Platform accepted";
            }
            this.data.btn_applyClose = 1;
            this.data.btn_delivery = 1;
            this.data.btn_view = 2; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            // 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收买家货、4平台已发货（给买家）、5已收对方藏品、
            //* 6保证金已退回、7保证金没收、8申请撤销、9已关闭
            //卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收卖家货、
            //* 6平台已发货（给卖家）、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
          } else if (
            this.data.seller_state > 4 &&
            this.data.seller_state < 9 &&
            this.data.buyer_state == 4
          ) {
            //卖家所发的藏品   平台已发货   按钮： 买家开放“确认收货”按钮
            //买家还未收货
            if (this.lang == "zh") {
              this.order_state_txt = "平台已发货";
            } else {
              this.order_state_txt = "Platform shipped";
            }
            this.data.btn_confirm = 1;
            this.data.btn_view = 3; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
          } else if (this.data.buyer_state == 5 || this.data.buyer_state == 6) {
            //买方已确认收货  保证金在退还状态  或者已退回   按钮：  查看交易
            if (this.lang == "zh") {
              this.order_state_txt = "交易完成";
            } else {
              this.order_state_txt = "done";
            }
            if (this.data.buyer_state == 5) {
              //保证金冻结中
              this.data.btn_view = 0; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else if (this.data.buyer_state == 6) {
              //保证金已退回
              this.data.btn_view = 1; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            }
          } else if (this.data.buyer_state == 7) {
            //买家页面
            // 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
            //* 6保证金已退回、7保证金没收、8申请撤销、9已关闭
            //卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
            //* 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭

            /**
             * 按钮
             * 1.申请关闭交易  btn_applyClose
             * 2.支付保证金    btn_payBail
             * 3.我要发货      btn_delivery
             * 4.确认收货      btn_confirm
             * 5.查看交易      btn_view   //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
             */
            //买家保证金被没收  买家过错方   交易关闭
            if (this.lang == "zh") {
              this.order_state_txt = "交易关闭";
            } else {
              this.order_state_txt = "closed";
            }
            this.data.btn_view = 1; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            // }
            // else if(this.data.seller_state == 8  && this.data.buyer_state <7){
            //     //卖方保证金已退回   1.买方未关闭交易     交易完成   2.买方申请关闭交易    交易关闭
            //     //1.买方未关闭交易
            //     if(this.lang == 'zh'){
            //         this.order_state_txt = "交易完成";
            //     }else{
            //         this.order_state_txt = "done";
            //     }
            //     this.data.btn_view = 1;
          } else if (
            this.data.seller_state == 8 &&
            (this.data.buyer_state == 7 ||
              this.data.buyer_state == 8 ||
              this.data.buyer_state == 9)
          ) {
            //卖方保证金已退回   1.买方未关闭交易     交易完成   2.买方申请关闭交易    交易关闭
            //2.买方申请关闭交易    交易关闭
            if (this.lang == "zh") {
              this.order_state_txt = "交易关闭"; //对方不同意置换关闭/用户关闭
            } else {
              this.order_state_txt = "closed";
            }
            if (this.data.buyer_state == 7 || this.data.buyer_state == 9) {
              //买方  保证金已没收或者交易已关闭
              this.data.btn_view = 1;
            } else {
              this.data.btn_view = 0; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            }
          } else if (this.data.seller_state == 9) {
            //卖方保证金被没收   交易关闭
            //买方状态未知
            if (this.lang == "zh") {
              this.order_state_txt = "交易关闭"; //对方不同意置换关闭/用户关闭
            } else {
              this.order_state_txt = "closed";
            }
            if (this.data.buyer_state == 6) {
              //买家保证金已退还
              this.data.btn_view = 1;
            } else {
              this.data.btn_view = 0;
            }
          } else if (this.data.seller_state == 10) {
            //卖方申请撤销   交易关闭中
            if (this.lang == "zh") {
              this.order_state_txt = "申请关闭中"; //对方不同意置换关闭/用户关闭
            } else {
              this.order_state_txt = "Apply to close";
            }
            this.data.btn_view = 0;
          } else if (this.data.seller_state == 11) {
            //卖方状态为易关闭   交易关闭
            if (this.lang == "zh") {
              this.order_state_txt = "交易关闭"; //对方不同意置换关闭/用户关闭
            } else {
              this.order_state_txt = "closed";
            }
            if (this.data.buyer_state == 6) {
              this.data.btn_view = 1; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else if (this.data.buyer_state == 7) {
              this.data.btn_view = 1; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else if (this.data.buyer_state == 9) {
              this.data.btn_view = 1; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else if (this.data.buyer_state == 0) {
              this.data.btn_view = 1; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            } else {
              this.data.btn_view = 0; //0 底部为空   1底部是删除按钮 2底部为其他按钮   3.底部只有唯一按钮但不是删除按钮
            }
          }

          //买家页面
          // 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
          //* 6保证金已退回、7保证金没收、8申请撤销、9已关闭
          //卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
          //* 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
          if (
            this.data.buyer_state == 0 ||
            (this.data.buyer_state == 9 &&
              (this.data.seller_state == 0 || this.data.seller_state == 1))
          ) {
            if (this.lang == "zh") {
              this.seller_state_txt = "未支付";
            } else {
              this.seller_state_txt = "Unpaid";
            }
            this.data.color = 0; //0 red   1green
          } else if (this.data.buyer_state == 7) {
            if (this.lang == "zh") {
              this.seller_state_txt = "已没收";
            } else {
              this.seller_state_txt = "Confiscated";
            }
            this.data.color = 0; //0 red   1green
          } else if (this.data.buyer_state == 6) {
            if (this.lang == "zh") {
              this.seller_state_txt = "已退回";
            } else {
              this.seller_state_txt = "Returned";
            }
            this.data.color = 1; //0 red   1green
          } else if (
            this.data.buyer_state != 0 &&
            this.data.buyer_state < 5 &&
            this.data.seller_state < 9 &&
            this.data.seller_state != 1
          ) {
            if (this.lang == "zh") {
              this.seller_state_txt = "已支付";
            } else {
              this.seller_state_txt = "Paid";
            }
            this.data.color = 1; //0 red   1green
          } else if (
            this.data.buyer_state == 8 &&
            (this.data.seller_state == 0 ||
              this.data.seller_state == 2 ||
              this.data.seller_state == 3 ||
              this.data.seller_state == 11)
          ) {
            //发起置换方 支付保证金后申请撤销交易   保证金要被没收
            if (this.lang == "zh") {
              this.seller_state_txt = "冻结中";
            } else {
              this.seller_state_txt = "Freezing";
            }
            this.data.color = 0; //0 red   1green
          } else {
            if (this.lang == "zh") {
              this.seller_state_txt = "冻结中";
            } else {
              this.seller_state_txt = "Freezing";
            }
            this.data.color = 0; //0 red   1green
          }
          this.loading = false;
          console.log(this.seller_state_txt, "inGoods");
        } else {
          if (this.lang == "zh") {
            Toast("获取详情失败，请稍后再试~");
          } else {
            Toast("Details failed. Please try again later~");
          }
        }
      });
    },
    //我要发货
    submit() {
      var para = {};
      if (this.lang == "zh") {
        para.title = "我要发货";
      } else {
        para.title = "Delivery";
      }
      para.url =
        "/mySend?id=" +
        this.id +
        "&type=2&userId=" +
        this.userId +
        "&lang=" +
        this.lang;
      this.interaction.hLink(para);
    },
    //申请关闭交易
    refuse() {
      //跳转到选择关闭理由页面
      var para = {};
      if (this.lang == "zh") {
        para.title = "申请关闭交易";
      } else {
        para.title = "Application for closing";
      }
      para.url =
        "/fackOf?id=" +
        this.id +
        "&isMychange=true&userId=" +
        this.userId +
        "&lang=" +
        this.lang;
      console.log(para);
      this.interaction.hLink(para);
    },
    //确认收货
    acceptOK() {
      postmyExchangeFinish(this.id, this.lang).then((res) => {
        if (res.code == 200) {
          //隐藏加载中
          this.load = false;
          //跳转到确认收货页面
          var para = {};
          if (this.lang == "zh") {
            para.title = "确认收货";
          } else {
            para.title = "Confirm receipt";
          }
          //支付成功：type=6保证金；type=7藏品金额；type=8确认收货
          //status=0查看更多返回的页面是置换；&status=1返回购买页面
          para.url =
            "/myorderSuccess?type=8&status=0&userId=" +
            this.userId +
            "&lang=" +
            this.lang;
          this.interaction.hLink(para);
        } else {
          Toast(res.msg);
        }
      });
    },
    //删除订单
    delOrder() {
      postmyExchangeDeleteOrder(this.id, this.lang).then((res) => {
        if (res.code == 200) {
          //隐藏加载中
          this.load = false;
          //跳转到操作结果页面
          var para = {};
          if (this.lang == "zh") {
            para.title = "我的置换";
          } else {
            para.title = "my exchange";
          }
          para.url = "/myChange?userId=" + this.userId + "&lang=" + this.lang;
          this.interaction.hLink(para);
        } else {
          Toast(res.msg);
        }
      });
    },
    //跳转到商品详情
    goDetails(id, tab) {
      // debugger;
      if (tab == 1 || tab == "1") {
        //自己的藏品
        let para = {};
        para.id = id; //藏品详情详情id (返回首页 此参数没有)
        para.linkType = "goodsDetail";
        para.lang = this.lang; //显示网页语言类型 zh中文 en英文
        if (this.lang == "zh") {
          para.rightBtn = "发布藏品"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
        } else {
          para.rightBtn = "publish"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
        }
        para.HideFootBar = true; //隐藏底部操作按钮 没有该参数代表不隐藏
        console.log("自己", para);
        this.interaction.hLinkToApp(para);
      } else {
        //不隐藏按钮
        let para = {};
        para.id = id; //藏品详情详情id (返回首页 此参数没有)
        para.linkType = "goodsDetail";
        para.lang = this.lang; //显示网页语言类型 zh中文 en英文
        if (this.lang == "zh") {
          para.rightBtn = "发布藏品"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
        } else {
          para.rightBtn = "publish"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
        }
        console.log("别人", para);
        this.interaction.hLinkToApp(para);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.bepaid{
    height:100%;
    padding-bottom: 1.9rem;
    background-color:#f1f1f1;
}

// 订单顶部信息
.order-box{
   padding :.4rem .266667rem;
   height:2.666667rem;
   background :url("http://img.zuimeng.net.cn/order/images/beijing_dingdanxiangqing@2x.png") no-repeat;
   background-size:100% 100%;
   box-sizing :border-box;
   h6{
       font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#cb9c57;
        letter-spacing:.0112rem;
        text-align:left;
        line-height :.533333rem;

   }
   p{
       font-family:PingFangSC-Regular;
        font-size:.346667rem;
        color:#cb9c57;
        letter-spacing:.0096rem;
        text-align:left;
        line-height :.533333rem;
        margin-top :.16rem;
   }
}
// 确认信息
.info-box{
    background-color :#fff;
    text-align:center;
    img{
        width :2.96rem;
        height :auto;
        margin .266667rem auto;
    }
    .goods-box{
        background:#fafafa;
        padding :.266667rem;
        overflow:hidden;
        .img-box{
            width :2.133333rem;
            height :2.133333rem;
            float:left;
            position:relative;
            img{
                width :100%;
                height:100%;
                margin :0;
            }
            img.label{
                width :1.093333rem;
                height :auto;
                position:absolute;
                left 0;
                top :0;
            }
        }
        dl{
            float:left;
            width :73%;
            margin-left :3.3%
            position :relative;
            height: 2.133333rem;
            dt{
                font-family:PingFangSC-Regular;
                font-size:.373333rem;
                color:#494949;
                letter-spacing:.008rem;
                line-height:.533333rem;
                text-align:left;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
            dd{
                position:absolute;
                bottom :0;
                font-family:PingFangSC-Medium;
                font-size:13px;
                color:#cb9c57;
                letter-spacing:0;
                text-align:left;
                width :100%;

                span{
                    font-family:PingFangSC-Regular;
                    font-size:.346667rem;
                    color:#2d2d2d;
                    letter-spacing:0;
                    text-align:right;
                    position:absolute;
                    right :0;
                }
            }
        }
    }
    .sold-box{
        margin-top :.133333rem;
    }
    //选择互换商品操作盒子区
    .handle-box{
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#eb3148;
        line-height:.533333rem;
        text-align:left;

        padding: 0 .266667rem;
        .click-box{
            position: relative;
            height :1.066667rem;
            line-height :1.066667rem;
            span{
                 color:red;
            }
            img.arow{
                height :.32rem;
                width :auto;
                position :absolute;
                right :0;
                top: 50%;
                margin-top :-0.16rem;
            }
        }
        .selected{
            text-align :center;
            img{
                height :.533333rem;
                width :auto;
            }
        }

    }
}
//物流
 .exp{
    padding:0!important;
    padding-top:.266667rem!important;
    li{
        padding :0 .266667rem;
        height :1.066667rem;
        line-height:1.066667rem;
        border-bottom :1px solid #f1f1f1;
        span{
            float:right;
        }
    }
}
// 支付金额
.payMoney{
    background-color :#fff;
    margin-top :.266667rem;
    padding :.266667rem;
    p{
        text-align :center;
        img{
            width: 2.96rem;
            height: auto;
            margin-bottom :.266667rem;
        }
    }
   .bottom{
       overflow :hidden;
       font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#494949;
        line-height:20px;
        p{
           float:left;

        }
        .yue{
            color:#9b9b9b!important;
        }
        .money{
            color:#cb9c57!important;
        }
        .green{
            color:#58a701!important;
        }
        .red{
            color:#d84053!important;
        }
       p:last-child{
           float:right;
           font-family:PingFangSC-Medium;
             color:#cb9c57;
       }
       li{
            span{
               float:right;
           }
       }
   }
}
// 选择支付方法
.choosePay{
    margin-top :.266667rem;
    margin-bottom :2.133333rem;
    background-color :#ffffff;
    .choosePay-txt{
        text-align :center;
        img{
            width: 3.76rem;
            height: auto;
            margin: 0.266667rem auto;
        }
    }
    .relative{
        position:relative;
        .van-cell{
            padding-left :1.28rem!important;
            font-family:PingFangSC-Regular;
            font-size:.346667rem!important;
            color:#494949;
            text-align:left;
        }
        .choosePay-icon{
            top: 50%;
            left: .4rem;
            margin-top: -0.34rem;
            width :.666667rem;
            height :.666667rem;
            position: absolute;
            z-index: 1;
        }
    }
    .borderbtm{
        border-bottom :.026667rem solid #f1f1f1;
    }

}
//提示
.tip{
    padding :0 .266667rem  0 .746667rem;
    margin-top:.266667rem;
    margin-bottom: 1.6rem;
    position:relative;
    font-family:PingFangSC-Regular;
    font-size:.32rem;
    color:#a2a2a2;
    letter-spacing:.008rem;
    i{
      width :.32rem;
      height :.32rem;
      position :absolute;
      left :.266667rem;
      top:50%;
      margin-top :-0.16rem;
      background :url("http://img.zuimeng.net.cn/order/images/tishi_woyaofahuo@2x.png") no-repeat;
      background-size :100%;
    }
}
// 底部操作按钮
.btn-box{
    position :fixed;
    padding-left :.4rem;
    left 0;
    bottom:0;
    opacity:0.9;
    background:#ffffff;
    box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
    width:100%;
    height :1.306667rem;
    line-height :1.306667rem;
    font-family:PingFangSC-Medium;
    font-size:.373333rem;
    color:#42403b;
    letter-spacing:.005067rem;
    box-sizing :border-box;
    z-index: 999;
    .refuse{
        height :1.306667rem;
        line-height :1.306667rem;
        //width :29%;
        padding:0 .26667rem;
        font-family:PingFangSC-Regular;
        font-size:.4rem;
        color:#cb9c57;
         float:right;
        &.en{
            width: 38%;
        }
    }
    .centerrefuse{
        height :1.306667rem;
        line-height :1.306667rem;
        width :100%;
        text-align:center;
        font-family:PingFangSC-Regular;
        font-size:.4rem;
        color:#cb9c57;
    }
    .del{
        color:#d84053;
    }
    .btn{
        background:#cb9c57;
        width:40%;;
        height :1.306667rem;
        line-height :1.306667rem;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ffffff;
        letter-spacing:.007733rem;
        text-align:center;
        float:right;
    }
}
.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
</style>
